<template>
    <div class="course-app">
        <div class="content"></div>
        <div class="download-btn">
            <div class="d-btn" @click="showShareModel = true">立即下载</div>
        </div>
        <cover-view class="shareModel" v-if="showShareModel">
            <cover-view class="shareMask" @click.stop.prevent="showShareModel = !showShareModel"></cover-view>
            <cover-view class="shareContent">
                <cover-view class="shareTitle">下载APP请回复数字“2”</cover-view>
                <cover-view class="shareSpace"></cover-view>
                <button class="shareButton" open-type="contact" @click="showShareModel = false">确定</button>
            </cover-view>
        </cover-view>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                // 显示 分享model
                showShareModel: false,
            }
        }
    }
</script>
<style lang="less" scoped>
.course-app {
    .download-btn {
        position: fixed;
        left: 50%;
        margin-left: -100rpx;
        bottom: 17rpx;
        width: 200rpx;
        height: 55rpx;
        text-align: center;
        overflow: hidden;
        .d-btn {
            width: 200rpx;
            height: 55rpx;
            line-height: 55rpx;
            font-family: PingFangSC-Regular;
            font-size: 30rpx;
            color: #FFFFFF;
            letter-spacing: 0.76rpx;
            background-image: linear-gradient(-90deg, #FE7A72 0%, #FFB497 100%);
            border-radius: 8rpx;
        }
    }
    .shareModel{
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 999999999999;
      .shareMask{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000;
        opacity: 0.7;
      }
      .shareContent{
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -104rpx;
        margin-left: -270rpx;
        width: 540rpx;
        height: 208rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        text-align: center;
        .shareTitle{
          font-family: PingFangSC-Regular;
          font-size: 34rpx;
          color: #333333;
          letter-spacing: -0.82rpx;
          height: 120rpx;
          line-height: 120rpx;
          // border-bottom: 2rpx solid #CCCCCC;
          background: #FFFFFF;
        }
        .shareSpace{
          width: 100%;
          height: 1rpx;
          background: #CCCCCC;
        }
        .shareButton{
          font-family: PingFangSC-Regular;
          font-size: 34rpx;
          color: #666666;
          letter-spacing: -0.82rpx;
          height: 87rpx;
          line-height: 87rpx;
          background: #FFFFFF;
        }
      }
    }
}
</style>
